{% extends "system_setup/base.html" %}

{% block page_link %}
    <script src="../../static/system_setup/js/new_role.js"></script>
    <link rel="stylesheet" href="../../static/system_setup/css/zTreeStyle/zTreeStyle.css">
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
{% endblock %}


{% block style %}
    <style>
        .add_class{
            background: #1E90FF;
        }
        tr{
            height: 35px;
        }
        th{
            text-align: center;
        }
        table {
            table-layout: fixed;
        }
        thead tr th {
            position:sticky;
            top:0; /* 列首永远固定在头部  */
            background-color: #E8E8E8;
        }
        th:first-child{
            z-index:2;
        }
    </style>
{% endblock %}



{% block right_content %}
    <div class="headline">
        <div style="width: 15%;height: 100%;line-height: 40px;float: left;padding-left: 1%;">
            <a href="new_role.html" style="color: #0b0b0b;">
                <i class="iconfont icon-jueseguanli"></i>
                <span> 新建角色</span>
            </a>
        </div>
    </div>

    <div class="right-box" style="width: 30%;height: 93%;">
        <div style="margin-left: 3%;width: 100%;">
            <div style="margin-top: 3%;width: 100%;">
                <label for="">角色名</label>
                <input id="stationName" class="form-control section-input1" type="text" placeholder=" 角色名" onblur="check_data()">
            </div>
            <div style="margin-top: 3%;">
                <label for="">备&nbsp;&nbsp;&nbsp;&nbsp;注</label>
                <textarea name="" id="position_statement" cols="30" rows="5" class="textarea-style"></textarea>
            </div>
        </div>
    </div>

    <div class="right-box" style="width: 69%;height: 93%;font-size: 0;">
        <div style="width: 30%;height: 100%;border-right: #E8E8E8 solid 1px;display: inline-block;vertical-align: top;">
            <div style="width: 100%;height: 40px;background: #0070c1;border-right: #4169E1 solid 1px;text-align: left;">
                <div style="width: 30%;text-align: center;line-height: 40px;color: #ffffff;font-size: 14px;">选择模块</div>
            </div>
            <div style="width: 100%;height: 95%;">
                <table class="table table-hover" style="border-collapse: collapse;width: 100%;font-size: 14px;">
                    <thead>
                        <tr>
                            <th scope="col" style="text-align: center;width: 25%;border-right: 1px #CFCFCF solid;">
                            </th>
                            <th scope="col" style="text-align: center;color: #0070c1;border-right: #E8E8E8;">模块名称</th>
                        </tr>
                    </thead>
                    <tbody style="  overflow: auto;" id="t_table"></tbody>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                </table>
            </div>
        </div>
        <div style="width: 70%;height: 100%;display: inline-block;vertical-align: top;padding: 0;margin: 0;">
            <div style="width: 100%;height: 80px;text-align: left;">
                <div style="background: #0070c1;width: 100%;height: 40px;">
                    <div style="width: 15%;font-size: 14px;color: #ffffff;line-height: 40px;text-align: center;background: #0070c1;">
                        功能权限
                    </div>
                </div>

                <div style="width: 100%;height: 35px;box-shadow: 0 2px 0 0 #E8E8E8;">
                    <div style="margin-left: 3%;">
                        <button class="check-button" onclick="check_all(1)">&nbsp;&nbsp;&nbsp;&nbsp;全&nbsp;选&nbsp;&nbsp;&nbsp;&nbsp;</button>
                        <button class="check-button" style="margin-left: 3%;" onclick="check_all(2)">&nbsp;&nbsp;&nbsp;&nbsp;清&nbsp;空&nbsp;&nbsp;&nbsp;&nbsp;</button>
                        <button class="check-button" style="margin-left: 3%;" onclick="save_data()">&nbsp;&nbsp;&nbsp;&nbsp;保&nbsp;存&nbsp;&nbsp;&nbsp;&nbsp;</button>
                    </div>
                </div>
            </div>
            <div style="width: 100%;height: 85%;display: block;overflow: auto;" id="jurisdiction">
            </div>
        </div>
    </div>

{% endblock %}
